<template>
  <div>
    <div class="url_class">
      <el-input v-model="url_data" style="padding: 30px; width: 700px" placeholder="请输入url地址" />
      <el-button type="primary" @click="creatQrCode">生成二维码</el-button>
      <div style="padding-right: 40%; padding-left: 40%; padding-top: 15%">
        <span id="qrcode" ref="url" />
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: "Qrcode",
  data() {
    return {
      url_data: ""
    }
  },
  methods: {
    creatQrCode() {
      document.getElementById("qrcode").innerHTML = "";
      // eslint-disable-next-line no-unused-vars
      const qrcode = new QRCode(this.$refs.url, {
        text: this.url_data, // 需要转换为二维码的内容
        width: 300,
        height: 300,
        colorDark: '#000000',
        colorLight: '#ffffff',
      })
    },
  }
}
</script>

<style scoped>

</style>
